<template>
    <svg  class="svg-content">
        <defs>
            <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #00fafd; stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #00fafd; stop-opacity: 0.5" />
            </linearGradient>
        </defs>
        <rect v-for="(star, starKey) of starsData" :key="starKey" :width="star.width" :height="star.height"
            fill="url(#star)">
            <animateMotion :path="star.path" :dur="star.duration" repeatCount="indefinite" rotate="auto" />
        </rect>

    </svg>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
const starsData = ref<any>([])
onMounted(() => {
    const {clientWidth,clientHeight} = document.body
    starsData.value = Array.from({ length: 50 }, (v, k) => {
        const x = Math.random() * clientWidth
        const y = clientHeight
        const path = `M${x} ${y} L${x} 0`
        const width = Math.random() * 50 + 20
        const height = Math.random() * 2 + 2
        const duration = (Math.random() * 5 + 3).toFixed(3) + 's'
        return { x, y, duration, path, width, height }
    })
})
</script>
<style lang='scss' scoped>
.svg-content{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
</style>